/**
* Copyright (c) 2018-present, Chen Guodong
* All rights reserved.
*
* @flow
*/


<template>
	<div class="image-dialog-background"  ref="dialog">
		<div class="wrapper" ref="canvasBox">
			<div class="btns" ref="btns">
				<mt-button @click="handlerCanvas" type="primary" style="margin-right: 10px">关闭</mt-button>
				<mt-button @click="handlerCanvasClear" type="primary" style="margin-right: 10px">清除</mt-button>
				<mt-button @click="handlerCanvasSave" type="primary">确定</mt-button>
			</div>
			<canvas ref="canvas" class="signature-pad"></canvas>
		</div>
	</div>
</template>

<script>
  import { changeOrientation } from "../../util/util.js";
  import { Toast } from "mint-ui";
  import SignaturePad from "signature_pad"; //签名模块
  import Vue from 'vue';
  export default {
    data(){
     return{
      signatureData: '',
      webSocket: {},
      socketData: {},
      urlParams: {}
    } 
  },
  mounted(){
    const btns = this.$refs.btns;
    const canvasBox = this.$refs.canvasBox;
    changeOrientation($(btns));
    this.initSignaturePad(); //初始化签字板
    this.initSocket();
    this.urlParams = getUrlAllParams();
    if(!this.urlParams.timeStamp || !this.urlParams.expireAt || !this.urlParams.clientId){
      Toast("URL参数不全,请重新扫码!")
      console.log("this.urlParams", this.urlParams)
    }
  },
  methods:{
    initSocket(){
      const self = this;
      this.webSocket = new WebSocket("ws://192.168.1.216:8283");
      this.webSocket.onopen = function(evt){
        console.log("链接建立成功!");
      };
      this.webSocket.onmessage = function(evt){
        self.socketData = JSON.parse(evt.data);
      };
      this.webSocket.onerror = function(evt){
        console.log('onerror', evt);
      };
    },
    initSignaturePad() {
      // 初始化签字版
      const canvas = this.$refs.canvas;
      var signaturePad = new SignaturePad(canvas, {
        backgroundColor: "rgba(255, 255, 255, 0)",
        penColor: "rgb(0, 0, 0)"
      });
      this.signaturePad = signaturePad;
      this.resizeCanvas();
      window.addEventListener("resize", this.resizeCanvas);
    },
    resizeCanvas() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext("2d");
      var ratio = Math.max(window.devicePixelRatio || 1, 1);
      canvas.width = canvas.offsetWidth * ratio;
      canvas.height = canvas.offsetHeight * ratio;
      canvas.getContext("2d").scale(ratio, ratio);
      	this.signaturePad.clear(); // otherwise isEmpty() might return incorrect value
      },
    // 显示/关闭签字模块
    handlerCanvas() {
    	this.showCanvas = !this.showCanvas;
      // this.resizeCanvas();

      setTimeout(() => {
      	this.resizeCanvas();
      }, 300);
    },

    // 清除签字模块画布
    handlerCanvasClear() {
    	this.signaturePad.clear();
    },
    // 保存签字模块数据并关闭画布
    handlerCanvasSave() {
      const self = this;
      const data = this.signaturePad.toDataURL("image/png");
      const width = document.documentElement.clientWidth; //满屏宽度
      const height = document.documentElement.clientHeight; //满屏高度
      let horizontal;
      if (width < height) {
      	horizontal = 0;
      } else {
      	horizontal = 1;
      }
      this.signatureData = data;
      this.handlerCanvas();
      this.horizontal = horizontal;
      let sendData = {
        event: 'signimg', 
        signimg: data, 
        horizontal: horizontal,
        timeStamp: this.urlParams.timeStamp,
        expireAt: this.urlParams.expireAt,
        clientId: this.urlParams.clientId,
      }
      console.log('传递的参数', sendData)
      self.webSocket.send(JSON.stringify(sendData));

    },
  }
}

</script>


<style lang='less' scoped>
@import "../../util/themt.less";
//签名部分
.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.signature-pad {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
// 签字模态框背景色
.image-dialog-background {
	overflow: auto;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(255, 255, 255, 0.95);
	text-align: center;
	z-index: 999;
}
    //模态框内部样式
    .wrapper {
    	position: relative;
    	width: 100%;
    	height: 100%;
    	overflow: hidden;
    	.btns {
    		width: 100%;
    		position: absolute;
    		bottom: 0;
    		left: 0;
    		display: flex;
    		justify-content: center;
    		align-items: center;
    		padding: 10px;
    		z-index: 999999;
    	}
    }
  </style>